<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>填写银行卡信息</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
        <link rel="stylesheet" type="text/css" href="../css/index.css" />
        <!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link href="../css/mui.poppicker.css" rel="stylesheet" />
        <style>
		.mui-control-content {
				background-color: white;
				min-height: 400px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;}
		.mui-media img{border-radius: 50%;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-table-view" style="box-shadow:none; border: none; background-color: #FFFFFF; position: fixed; top: 0;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">填写银行卡信息</h1>
			<a class="mui-icon  mui-icon-more-filled mui-pull-right"></a>
		</header>
		<div class="title" style="font-size: 12px; color: #B5B5B5; margin-top: 17%;">
			请选择银行卡类型
		</div>
	    <div class="mui-content">
	        <ul class="mui-table-view">	        
				<li class="mui-table-view-cell">
					卡类型
					<button id='showUserPicker' type='button' style="border: none; margin-top: -2%; margin-left: 7%; font-size: 15px; font-weight: bold; color: #0787F4;">选择地址</button>
					
				</li>
				<li class="mui-table-view-cell">
					手机号
					<span id=""  style="margin-left: 6%; color: #888888;">
						<input type="text" name="" placeholder="请输入银行预留手机号" style="width: 60%; height: 25px; line-height: 25px; border: 0; font-size: 15px;">
					</span>
					<span style="float: right;">
						<a href=""><img src="../images/ming.png"></a>
					</span>
				</li>
		    </ul>
		</div>
	    <div class="title" >
	    	<form>
			    <input type="checkbox" name="" >
			    <label>同意 <a href="" style="color: #0787F4;">《用户协议》</a></label>
			</form>
		</div>
		<div class="mui-content-padded" style="margin-top:1rem;">
			<button type="button" class="mui-btn mui-btn-warning mui-btn-block" >下一步</button>
		</div>
<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: 'ywj',
						text: '董事长 叶文洁'
					}, {
						value: 'aaa',
						text: '总经理 艾AA'
					}, {
						value: 'lj',
						text: '罗辑'
					}, {
						value: 'ymt',
						text: '云天明'
					}, {
						value: 'shq',
						text: '史强'
					}, {
						value: 'zhbh',
						text: '章北海'
					}, {
						value: 'zhy',
						text: '庄颜'
					}, {
						value: 'gyf',
						text: '关一帆'
					}, {
						value: 'zhz',
						text: '智子'
					}, {
						value: 'gezh', 
						text: '歌者'
					}]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							console.log(items[0].text);
							showUserPickerButton.innerText = ""+items[0].text+"";
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					
					//-----------------------------------------
					//					//级联示例
					var cityPicker3 = new $.PopPicker({
						layer: 3
					});
					cityPicker3.setData(cityData3);
					var showCityPickerButton = doc.getElementById('showCityPicker3');
					var cityResult3 = doc.getElementById('cityResult3');
					showCityPickerButton.addEventListener('tap', function(event) {
						cityPicker3.show(function(items) {
							showCityPickerButton.innerText = "" + (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
				});
			})(mui, document);
			
			mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			//console.log('shown', e.detail.id);//detail为当前popover元素
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			//console.log('hidden', e.detail.id);//detail为当前popover元素
		});
		var info = document.getElementById("info");
		mui('body').on('tap', '.mui-popover-action li>a', function() {
			var a = this,
				parent;
			//根据点击按钮，反推当前是哪个actionsheet
			for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
				if (parent.classList.contains('mui-popover-action')) {
					break;
				}
			}
			//关闭actionsheet
			mui('#' + parent.id).popover('toggle');
			info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
		})
		</script>
	</body>
</html>
